<template>
    <div class="why">
      <div class="content">
        <div class="title">
          为什么选择我们
        </div>
        <div class="sub-title">
          集研发、设计、销售为一体的现代高品质磨料磨具生产单位
        </div>
        <div class="list">
          <div :class="{item: true, active: item.active}" v-for="(item, index) in listData" :key="index">
            <img :src="item.url" />
            <div class="list-title">{{item.title}}</div>
            <div class="list-desc">{{item.desc}}</div>
            <div v-if="item.desc2" class="list-desc">{{item.desc2}}</div>
            <div v-if="item.desc3" class="list-desc">{{item.desc3}}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "HomeWhy",
    data() {
      return {
        listData: [
          {
            active: true,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/9ibr.png',
            title: '多年磨料磨具生产经验',
            desc: '30年高端磨料生产企业',
            desc2: '以划时代的面貌向众多的领域提供“玉神”优良的产品'
          },
          {
            active: false,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/6awc.png',
            title: '白刚玉质量服务有保障',
            desc: '在ISO9000 质量管理体系下的规范运行和客户普遍的信',
            desc2: '赖和协作中，为创人们理想社会做出应有的努力'
          },
          {
            active: true,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/templatefiles/58e935d64d34ab01deab4ce06c7f8be5.png',
            title: '先进的工艺设备',
            desc: '免拥有河南省商检局注册的实验室以及完善的实验设施',
            desc2: '和先进的理化检测设备，生产制造“玉神”牌系列作品'
          },
          {
            active: false,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/templatefiles/1a9c30429d04c96b633bb91089c280d3.png',
            title: '优良生产环境',
            desc: '公司位于人杰地灵、物华天宝、美丽富饶，具有悠久历',
            desc2: '史和深厚文化底蕴积淀的河南省郑州市'
          },
          {
            active: true,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/qlee.png',
            title: '玉神产品 行销全球',
            desc: '我公司生产的“玉神”牌产品畅销世界上四十多个国家和',
            desc2: '地区，并取得中华人民共和国进出口经营权，成为亚太',
            desc3: '地区知名度极高的磨科生产加工企业'
          },
          {
            active: false,
            url: 'https://proc58103-pic18.websiteonline.cn/upload/templatefiles/6e3ebe3f8d58b686a52aed7d3ce0aeda.png',
            title: '贴心服务支持',
            desc: '以诚信赢取客户，以精品树品牌',
            desc2: '以管理出效益'
          }
        ]
      };
    },
    methods: {
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .why {
    background-color: rgb(2, 10, 39);
    width: 100%;
    .content {
      width: 1200px;
      height: 884px;
      margin: 0 auto;
      margin-top: 80px;
      padding-top: 80px;
    }
    .title {
      font-size: 39px;
      color: rgb(255, 255, 255);
      font-weight: bold;
      width: 100%;
      text-align: center;
    }
    .sub-title {
      color: rgb(255, 255, 255);
      font-size: 14px;
      width: 100%;
      margin-top: 40px;
      text-align: center;
    }
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
      margin-top: 90px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        box-sizing: border-box;
        img {
          width: 68px;
        }
        .list-title {
          font-size: 18px;
          line-height: 140%;
          color: #fff;
          margin: 20px 0;
        }
        .list-desc {
          line-height: 200%;
          color: #fff;
          font-size: 14px;
        }
      }
      .active {
        background-color: rgb(23, 30, 56);
      }
    }
  }

  </style>
  